<template>
    <div>
        <el-dialog :visible.sync="visible" title="巡检点管理" width="30%" center @closed="dialogReset">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item v-show="false" label="巡检路线ID" prop="routeId">
                    <el-input v-model="form.routeId"></el-input>
                </el-form-item>
                <el-form-item label="巡检点ID" prop="id">
                    <el-input v-model="form.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="巡检点名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="巡检点简称" prop="pointAlpha">
                    <el-input v-model="form.pointAlpha"></el-input>
                </el-form-item>
                <el-form-item label="标识类型" prop="markType">
                    <el-select v-model="form.markType" placeholder="请选择标识类型">
                        <el-option label="二维码" :value="1"></el-option>
                        <el-option label="蓝牙" :value="2"></el-option>
                        <el-option label="NFC" :value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="isScan">
                    <el-checkbox label="巡检单是否需要扫描标签方可开启该巡更点" name="type" v-model="form.isScan"></el-checkbox>
                </el-form-item>
                <el-form-item prop="isEffective">
                    <el-tooltip content="dasdad"></el-tooltip>
                    <el-checkbox label="是否有效" name="type" v-model="form.isEffective"></el-checkbox>
                </el-form-item>
                <el-form-item label="巡检路线" prop="routeId">
                    <el-select v-model="form.routeId" placeholder="请选择巡检路线">
                        <el-option v-for="route in form.routes" :label="route.name" :value="route.id" :key="route.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="dataFormSubmit()">确 定</el-button>
                <el-button @click="visible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: "point-add-or-update",
        data() {
            return {
                form: {
                    id: null,
                    name: '',
                    pointAlpha: '',
                    markType: 1,
                    isScan: 0,
                    isEffective: 0,
                    routeId: null,
                    routes: []
                },
                globalRouteId: null,
                visible: false
            }
        },
        methods: {
            dialogReset() {
                this.$refs['form'].resetFields();
            },
            init(id, routes, routeId) {
                this.globalRouteId = routeId;
                if (this.form.routes.length === 0) {
                    for(let route of routes) {
                        if (route.children != null && route.children.length > 0) {
                            for (let child of route.children) {
                                this.form.routes.push(child);
                            }
                        }
                    }
                }

                this.visible = true;
                this.id = id || '';
                this.$nextTick(() => {
                    this.$refs['form'].resetFields();
                    // 如果是创建巡检点，那么 id 就为 null，不会进入 if 语句
                    // 如果是更新或者查看巡检点的信息，那么 id 就不为 null，会进入 if 语句
                    if (this.id) {
                        axios.get('http://gulimall.com/api/inspection/point/info', {params: {pointId: this.id}}).then(
                            response => {
                                let data = response.data.data;
                                this.form.id = data.id;
                                this.form.name = data.name;
                                this.form.pointAlpha = data.pointAlpha;
                                this.form.markType = data.markType;
                                this.form.isScan = data.isScan !== 0;
                                this.form.isEffective = data.isEffective !== 0;
                                this.form.routeId = data.routeId;
                            },
                            error => {
                                console.log('获取巡检点属性出现错误');
                            }
                        );
                    }
                });
            },
            dataFormSubmit() {
                // 获取表单中的所有填写好的参数值
                let params = {
                    id: this.form.id,
                    name: this.form.name,
                    pointAlpha: this.form.pointAlpha,
                    markType: this.form.markType,
                    isScan: this.form.isScan ? 1 : 0,
                    isEffective: this.form.isEffective ? 1 : 0,
                    routeId: this.form.routeId,
                    // globalRouteId 指的是之前的 routeId，也就是点击了哪一个巡检路线
                    globalRouteId: this.globalRouteId
                };

                console.log(params);
                // 如果 form.id 为 null，说明这个表单是创建一个新的巡检点对象
                // 如果 form.id 不为 null，说明这个表单是更新一个巡检点对象
                if (this.form.id == null) {
                    axios.post('http://gulimall.com/api/inspection/point/create', {
                        ...params
                    }).then(
                        response => {this.showMessage();},
                        error => {console.warn('创建巡检点失败');}
                    );
                } else {
                    axios.post('http://gulimall.com/api/inspection/point/update', {
                        ...params
                    }).then(
                        response => {this.showMessage();},
                        error => {console.warn('更新巡检点失败');}
                    );
                }
            },
            showMessage() {
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.visible = false;
                        this.$emit('refreshDataList')
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>
